<template>
  <div class="profile-page">
    <div class="container">
      <div style="display: flex; align-items: center; gap: 12px; margin: 16px 0;">
        <a-button type="default" @click="goHome">返回首页</a-button>
        <h2 style="margin: 0;">个人中心</h2>
      </div>

      <a-card>
        <a-descriptions title="我的信息" bordered :column="1" size="middle">
          <a-descriptions-item label="用户名">{{ user.username || '-' }}</a-descriptions-item>
          <a-descriptions-item label="姓名">
            <template v-if="!editMode">{{ user.realName || '-' }}</template>
            <template v-else>
              <a-input v-model:value="form.realName" placeholder="请输入姓名" style="max-width:260px" />
            </template>
          </a-descriptions-item>
          <a-descriptions-item label="手机">
            <template v-if="!editMode">{{ user.tel || '-' }}</template>
            <template v-else>
              <a-input v-model:value="form.tel" placeholder="请输入手机" style="max-width:260px" />
            </template>
          </a-descriptions-item>
          <a-descriptions-item label="创建时间">{{ formatDate(user.createdAt) }}</a-descriptions-item>
          <a-descriptions-item label="更新时间">{{ formatDate(user.updatedAt) }}</a-descriptions-item>
        </a-descriptions>

        <div style="margin-top: 16px; display: flex; gap: 12px;">
          <a-button v-if="!editMode" type="primary" @click="startEdit">修改信息</a-button>
          <template v-else>
            <a-button type="primary" :loading="saving" @click="save">保存</a-button>
            <a-button @click="cancelEdit">取消</a-button>
          </template>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import request from '@/utils/request'
import { message } from 'ant-design-vue'

const router = useRouter()
const user = ref({})
const form = ref({ realName: '', tel: '' })
const saving = ref(false)
const editMode = ref(false)

const loadUser = () => {
  const info = localStorage.getItem('userInfo')
  user.value = info ? JSON.parse(info) : {}
  form.value.realName = user.value.realName || ''
  form.value.tel = user.value.tel || ''
}

const formatDate = (dt) => {
  if (!dt) return '-'
  try { return new Date(dt).toLocaleString('zh-CN') } catch { return '-' }
}

const goHome = () => router.push('/')
const save = async () => {
  if (!form.value.realName || !form.value.tel) {
    message.warning('请填写姓名和手机')
    return
  }
  saving.value = true
  try {
    await request.put('/auth/profile', { realName: form.value.realName, tel: form.value.tel })
    // 同步到本地缓存并提示
    user.value.realName = form.value.realName
    user.value.tel = form.value.tel
    localStorage.setItem('userInfo', JSON.stringify(user.value))
    editMode.value = false
    message.success('已保存')
  } catch (e) {
    message.error(e?.response?.data?.message || '保存失败')
  } finally {
    saving.value = false
  }
}

const startEdit = () => {
  form.value.realName = user.value.realName || ''
  form.value.tel = user.value.tel || ''
  editMode.value = true
}

const cancelEdit = () => {
  editMode.value = false
}

onMounted(() => {
  loadUser()
})
</script>

<style scoped>
.profile-page { padding: 16px 0; }
.container { max-width: 960px; margin: 0 auto; padding: 0 16px; }
</style>


